<template>
  <div class="rightWrap">
    <div class="rightWrapContent">
      <!-- 监管概览 -->
      <div class="supervise flex-column-cus">
        <comTitle>
          <template #title> 监管概览 </template>
        </comTitle>
        <div class="flex-common flex1 mt-16 mb-16">
          <div
            class="listItem flex-common mr-24"
            v-for="item in schoolData"
            :key="item.name"
          >
            <img
              class="pl-12 pr-12"
              src="@/assets/images/home/main_icon_item1.svg"
              alt=""
              style="width: 35px; height: 32px"
            />
            <div class="itemRight fs-14">
              <div class="cr-hui3 mb-4">{{ item.name }}</div>
              <div class="flex" style="align-items: baseline">
                <span class="familyD cr-main fs-20">{{
                  deviceData[item.value]
                }}</span>
                <span class="cr-hui4">个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-common flex5" style="flex-wrap: wrap">
          <div
            class="listItem1 mb-8 fs-12 flex-around mr-24"
            v-for="item in schoolDeviceData"
            :key="item.name"
          >
            <img
              class="pl-12 pr-12"
              :src="require(`@/assets/images/home/${item.img}.svg`)"
              alt=""
              style="width: 28px; height: 22px; flex-shrink: 0"
            />
            <div class="cr-hui3 flex-start" style="flex: 1.8">
              {{ item.name }}
            </div>
            <div class="flex-around" style="align-items: baseline; flex: 2">
              <span class="familyD cr-main fs-18">{{
                deviceData[item.value]
              }}</span>
              <span class="cr-hui4">台</span>
            </div>
          </div>
        </div>
      </div>
      <!--  实验室使用情况 -->
      <div class="use flex-column-cus">
        <comTitle>
          <template #title> 实验室使用情况 </template>
          <template #time>
            <div class="time">
              {{ monthTimes }}
              <!-- <Time
                :type="'month'"
                :value="monthTimes"
                @valueChange="(event) => (monthTimes = event)"
              ></Time> -->
            </div>
          </template>
        </comTitle>
        <div class="use-item">
          <div class="title cr-hui mt-12 mb-12 fs-16">设备使用</div>
          <div class="flex-common flex1" style="flex-wrap: wrap">
            <div class="listItem2 mb-8 fs-14 flex pl-16 mr-24">
              <div class="cr-hui3 flex-common listItem2-text">
                <span class="mr-12 listItem2-text-one"
                  >设备累计<span class="cr-main">预约量</span>
                </span>
                <div class="flex-common value">
                  <span class="familyD cr-main fs-18">{{
                    findUsingConditionData.orderNumOfSum
                  }}</span>
                  <span class="cr-hui4 fs-12 ml-6">次</span>
                </div>
              </div>
              <img
                class="pl-12"
                src="@/assets/images/home/main_icon_item7.svg"
                alt=""
                style="width: 13px; height: 16px"
              />
            </div>
            <div class="listItem2 mb-8 fs-14 flex pl-16">
              <div class="cr-hui3 flex-common listItem2-text">
                <span class="mr-12 listItem2-text-one"
                  >设备累计<span class="cr-main">使用量</span>
                </span>
                <div class="flex-common value">
                  <span class="familyD cr-main fs-18">{{
                    findUsingConditionData.usingConsumablesOfSum
                  }}</span>
                  <span class="cr-hui4 fs-12 ml-6">次</span>
                </div>
              </div>
              <img
                class="pl-12"
                src="@/assets/images/home/main_icon_item8.svg"
                alt=""
                style="width: 13px; height: 16px"
              />
            </div>
          </div>
          <div class="title cr-hui mt-6 mb-12 fs-16">能耗监测</div>
          <div class="flex-common flex1" style="flex-wrap: wrap">
            <div class="listItem2 mb-8 fs-14 flex pl-16 mr-24">
              <div class="cr-hui3 flex-common listItem2-text">
                <span class="mr-12 listItem2-text-one"
                  >当月累计<span class="cr-main">用电量</span>
                </span>
                <div class="flex-common value">
                  <span class="familyD cr-main fs-18">{{
                    findUsingConditionData.eletricUsageOfSum
                  }}</span>
                  <span class="cr-hui4 fs-12 ml-6">千瓦</span>
                </div>
              </div>
              <img
                class="pl-12"
                src="@/assets/images/home/main_icon_item7.svg"
                alt=""
                style="width: 13px; height: 16px"
              />
            </div>
            <div class="listItem2 mb-8 fs-14 flex pl-16">
              <div class="cr-hui3 flex-common listItem2-text">
                <span class="mr-12 listItem2-text-one"
                  >当月累计<span class="cr-main">用水量</span>
                </span>
                <div class="flex-common value">
                  <span class="familyD cr-main fs-18">{{
                    findUsingConditionData.waterUsageOfSum
                  }}</span>
                  <span class="cr-hui4 fs-12 ml-6">吨</span>
                </div>
              </div>
              <img
                class="pl-12"
                src="@/assets/images/home/main_icon_item8.svg"
                alt=""
                style="width: 13px; height: 16px"
              />
            </div>
          </div>
          <div class="title cr-hui mt-6 mb-12 fs-16">耗材使用</div>
          <div class="flex-common flex2" style="flex-wrap: wrap">
            <div class="listItem2 mb-10 fs-14 flex pl-16 mr-24">
              <div class="cr-hui3 flex-common listItem2-text">
                <span class="mr-12 listItem2-text-one"
                  >当月累计<span class="cr-main">采购量</span>
                </span>
                <div class="flex-common value">
                  <span class="familyD cr-main fs-18">{{
                    findUsingConditionData.warehousingNumOfSum
                  }}</span>
                  <span class="cr-hui4 fs-12 ml-6">kg</span>
                </div>
              </div>
              <img
                class="pl-12"
                src="@/assets/images/home/main_icon_item7.svg"
                alt=""
                style="width: 13px; height: 16px"
              />
            </div>
            <div class="listItem2 mb-10 fs-14 flex pl-16">
              <div class="cr-hui3 flex-common listItem2-text">
                <span class="mr-12 listItem2-text-one"
                  >当月累计<span class="cr-main">使用量</span>
                </span>
                <div class="flex-common value">
                  <span class="familyD cr-main fs-18">{{
                    findUsingConditionData.usingNumOfSum
                  }}</span>
                  <span class="cr-hui4 fs-12 ml-6">kg</span>
                </div>
              </div>
              <img
                class="pl-12"
                src="@/assets/images/home/main_icon_item8.svg"
                alt=""
                style="width: 13px; height: 16px"
              />
            </div>
            <div class="listItem2 mb-10 fs-14 flex pl-16 mr-24">
              <div class="cr-hui3 flex-common listItem2-text">
                <span class="mr-12 listItem2-text-one"
                  >月底<span class="cr-main">库存量</span>
                </span>
                <div class="flex-common value">
                  <span class="familyD cr-main fs-18">{{
                    findUsingConditionData.remainNumOfSum
                  }}</span>
                  <span class="cr-hui4 fs-12 ml-6">kg</span>
                </div>
              </div>
              <img
                class="pl-12"
                src="@/assets/images/home/main_icon_item7.svg"
                alt=""
                style="width: 13px; height: 16px"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 实时事件 -->
      <div class="event">
        <comTitle>
          <template #title> 实时事件 </template>
          <template #subtitle>
            <div class="more" @click="toMore">查看更多</div>
          </template>
          <template #time>
            <!-- <div class="time">
              {{ tabData[0].createTime }}
            </div> -->
            <div class="time">
              {{ tabData[0].createTime }}
            </div>
          </template>
        </comTitle>
        <div class="table">
          <div class="flex-common table-title cr-hui3 fs-14 pt-16 mb-10">
            <div class="mr-40">
              事件总数
              <span class="cr-red familyD fs-18 ml-8 mr-6">{{
                difEventOfNumData.onlineEvent + difEventOfNumData.personEvent
              }}</span>
              <span class="cr-hui4 fs-12">条</span>
            </div>
            <div class="mr-40">
              在线监测
              <span class="cr-red familyD fs-18 ml-8 mr-6">{{
                difEventOfNumData.onlineEvent
              }}</span>
              <span class="cr-hui4 fs-12">条</span>
            </div>
            <div class="mr-40">
              人工上报
              <span class="cr-red familyD fs-18 ml-8 mr-6">{{
                difEventOfNumData.personEvent
              }}</span>
              <span class="cr-hui4 fs-12">条</span>
            </div>
          </div>
        </div>
        <scroll :height="60">
          <mergeTable :tableData="tabData" :tableConfig="tabConfig">
            <el-table-column
              slot="index"
              align="center"
              label="编号"
              type="index"
            ></el-table-column>
            <el-table-column align="center" label="事件类型" slot="eventType">
              <template slot-scope="{ row }">
                <span class="fs-12">{{
                  tableCommonMethod.getStatuseventType(row.eventType)
                }}</span>
              </template>
            </el-table-column>
          </mergeTable>
        </scroll>
      </div>
    </div>
  </div>
</template>

<script>
import { homeRightConfig } from "@/jsonData/table";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
export default {
  props: [
    "deviceData",
    "findUsingConditionData",
    "tabData",
    "difEventOfNumData",
  ],
  data() {
    return {
      monthTimes: "",
      dateTimes: new Date(),
      tableCommonMethod: tableCommonMethod,
      tabConfig: homeRightConfig,
      schoolData: [
        {
          name: "院校总数",
          value: "collegeNum",
        },
        {
          name: "院系总数",
          value: "facultyNum",
        },
        {
          name: "实验室总数",
          value: "laboratoryNum",
        },
      ],
      schoolDeviceData: [
        {
          name: "仪器设备总数",
          value: "monitorNum",
          img: "main_icon_item2",
        },
        {
          name: "耗材柜总数",
          value: "cabinetNum",
          img: "main_icon_item3",
        },
        {
          name: "能耗监测设备",
          value: "energyNum",
          img: "main_icon_item4",
        },
        {
          name: "视频总数",
          value: "videoNum",
          img: "main_icon_item5",
        },
        {
          name: "门禁总数",
          value: "doorNum",
          img: "main_icon_item6",
        },
        {
          name: "环境监测设备",
          value: "envNum",
          img: "main_icon_item9",
        },
      ],
    };
  },
  methods: {
    toMore() {
      this.$emit("showTable", true);
    },
  },
  mounted() {
    this.monthTimes = this.$getTime(new Date(), false, "month");
  },
};
</script>

<style lang="scss" scoped>
.rightWrap {
  width: 100%;
  height: 100%;
  .rightWrapContent {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    .supervise {
      width: 100%;
      height: 31%;
      .listItem {
        width: 33.3%;
        height: 68px;
        background: #f7fcfc;
        border: 1px solid #50d8ca;
        border-radius: 4px;
      }
      .listItem:nth-last-child(1) {
        margin-right: 0px !important;
      }
      .listItem1 {
        width: 47.3%;
        height: 40px;
        background: #f5f6fa;
        border-radius: 4px;
      }
      .listItem1:nth-last-child(2n-1) {
        margin-right: 0px !important;
      }
    }
    .use {
      width: 100%;
      height: 38%;
      .use-item {
        display: flex;
        flex-direction: column;
        flex: 1;
        .listItem2 {
          width: 47.3%;
          height: 40px;
          position: relative;
          background: #f5f6fa;
          border-radius: 4px;
          box-sizing: border-box;
          .value {
            align-items: baseline;
          }
          .listItem2-text {
            align-items: baseline;
            width: 100%;
            .listItem2-text-one {
              min-width: 50%;
            }
          }
          img {
            position: relative;
            right: 12px;
          }
        }
      }
      .time {
        width: 138px;
        text-align: right;
        line-height: 26px;
        height: 26px;
        position: relative;
        color: #21333f;
        right: 10px;
        top: 3px;
        font-size: 14px;
      }
      /deep/.el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 128px !important;
      }
      /deep/.el-input--prefix .el-input__inner {
        padding-left: 16px !important;
      }
      /deep/ .el-input__prefix {
        right: 6px !important;
        top: -3px !important;
        left: inherit !important;
      }
    }
    .event {
      width: 100%;
      height: 31%;
      .time {
        width: 138px;
        text-align: right;
        line-height: 26px;
        height: 26px;
        position: relative;
        color: #21333f;
        right: 10px;
        top: 4px;
        font-size: 14px;
        font-weight: 500;
      }
      .more {
        cursor: pointer;
        margin-left: 24px;
        width: 90px;
        height: 28px;
        border: 1px solid #00bfb1;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #00bfb1;
        line-height: 28px;
      }
      /deep/.el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 160px !important;
      }
      /deep/.el-input--prefix .el-input__inner {
        padding-left: 16px !important;
      }
      /deep/ .el-input__prefix {
        right: 6px !important;
        top: -3px !important;
        left: inherit !important;
      }
      /deep/ .el-table td {
        padding: 8px 0 !important;
      }
      /deep/ .el-table th {
        padding: 8px 0 !important;
      }
    }
  }
}
</style>